<template>
  <div
    class="butt-list-sty"
    :style="{ paddingLeft: queryAllListFlag ? '200px' : '' }"
  >
    <el-input placeholder="请输入作业名称" v-model="keyWord" @change="goSearch" v-show="queryAllListFlag">
    </el-input>
    <div
      v-for="(item, index) in newList"
      :key="index"
      :class="index === selectedindex ? 'basebut1' : 'basebut2'"
      @click="selbut(index)"
    >
      {{ item.name }}
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import classificat from "@/api/digital-production/agricultural-work-management/agricultural-work-classification";
export default {
  data() {
    return {
      selectedindex: 0,
      keyWord: "",
      flag: false,
      buttonselectlist: [],
      newList: [],
      queryAllListFlag: false
    };
  },
  created() {
    this.getList()
  },
  mounted() {
    this.selbut(0);
  },
  methods: {
    selbut(i) {
      this.selectedindex = i;
      this.$emit("nowselectbuttonindex", i);
    },
    getList() {
      if (getToken("parentId")) {
        let zhurl =
          this.$baseurl.webServiceUrl +
          "productionv2/agriculturalWorkType/queryByCondition";
        let neworglist =
          getToken("organizationList") + "," + getToken("parentId");
        axios({
          headers: {
            sysDataBaseName: sessionStorage.databaseName,
            accessToken: getToken("token"),
            systemMark: "MC",
            databaseName: getToken("databaseName"),
            organizationList: neworglist,
            organizationNo: getToken("organizationNo"),
          },
          data: {
            farmingTypeNo: getToken("farmingTypeNo"),
          },
          method: "post",
          url: zhurl,
        }).then((res) => {
          let data = res.data;
          data.forEach((el) => {
            el["name"] = el.agriculturalWorkTypeName;
          });
          this.buttonselectlist = data
          this.newList = data
          if(this.buttonselectlist.length>40) {
            this.queryAllListFlag = true
          }
        });
      } else {
        classificat.getqueryAllList().then((res) => {
          let data = res.data;
          data.forEach((el) => {
            el["name"] = el.agriculturalWorkTypeName;
          });
          this.buttonselectlist = data
          this.newList = data
          if(this.buttonselectlist.length>40) {
            this.queryAllListFlag = true
          }
        });
      }
    },
    goSearch(e) {
      this.newList = this.buttonselectlist.filter(el=>{
        return el.name.includes(e)
      })
      this.$emit('updateQueryAllList',this.newList)
      if(this.newList.length>0) {
        this.selbut(0)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.butt-list-sty {
  position: relative;
  min-width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}
.basebut1 {
  display: inline-block;
  word-wrap: break-word;
  width: auto;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
  text-align: center;
  // background-color: transparent;
  background-image: linear-gradient(#0fa1d2, #1087af, #106f8f);
  border: #f6f9f9 1px solid;
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer;
  margin: 3px 5px;
}
.basebut2 {
  display: inline-block;
  word-wrap: break-word;
  width: auto;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #106986;
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer;
  margin: 3px 5px;
  padding-left: 10px;
  padding-right: 10px;
}

::v-deep .el-input {
  position: absolute;
  width: 200px !important;
  height: 30px !important;
  left: 0;
}
</style>
